<!-- 修改个人信息 -->
<template>
  <div>
    <!--   返回上一页 <   -->
    <div class="page-title">
      <div class="flex justify-between" style="margin: 3px 4px 3px 0">
        <div class="flex items-center">
          <van-icon
            name="arrow-left"
            size="20"
            style="border-radius: 50%"
            @click="goBack"
          ></van-icon>
          <div class="ml-[10px]" style="margin-left: 130px">实名认证</div>
        </div>
        <div class="flex items-center">
          <van-icon name="ellipsis" size="20" />
        </div>
      </div>
      <hr />
    </div>
    <!-- 表单 -->
    <div class="card">
      <el-form :rules="editRules" :model="userInfo">
        <el-form-item label="姓  名" prop="realName">
          <el-input v-model="userInfo.realName" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="身份证号" prop="identificationNumber">
          <el-input
            v-model="userInfo.identificationNumber"
            placeholder="请输入身份证号"
          />
        </el-form-item>
      </el-form>
    </div>
    <div>
      <div id="verifyclass" @click="verifyButtonDisable && verifyInfo()">
        <div><span v-if="status.flag === 1">校验通过</span><span v-else>校&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;验</span>
        </div>
      </div>
    </div>
    <div>
      <div class="my-button" @click="onSubmit">
        <div>保存修改</div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { computed, onMounted, reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { useUserStore } from "@/store/modules/user";
import http from "@/utils/http";

const route = useRoute();
const router = useRouter();
const userStore = useUserStore();
// 登录信息
const userInfo = ref({
  nickname: "",
  phone: "",
  realName: "",
  identificationNumber: "",
  avatarUrl: ""
});
const status = reactive({
  flag: 0
});
const idPattern =
  /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
const verifyButtonDisable = computed(
  () =>
    userInfo.value.realName.length > 1 &&
    idPattern.test(userInfo.value.identificationNumber)
);
// 表单规则
const editRules = reactive({
  realName: [
    { required: true, message: "请输入姓名", trigger: "blur", min: 2, max: 16 }
  ],
  identificationNumber: [
    {
      required: true,
      message: "请输入身份证号",
      trigger: "blur" | "input",
      min: 18,
      max: 18
    },
    {
      pattern: idPattern,
      message: "请输入有效的身份证号",
      trigger: "blur" | "input"
    }
  ]
});
const verifyInfo = () => {
  http.post("/app/user/authentication", userInfo.value).then(res => {
    if (res.code === 200 && res.data === 200) {
      status.flag = 1;
      ElMessage.success("校验成功");
      document.getElementById("verifyclass").style.backgroundColor = "#6ac044";
    } else {
      ElMessage.error("姓名或身份证号有误");
    }
  });
};
const onSubmit = () => {
  if (status.flag === 0) {
    ElMessage.error("请先校验信息");
    return;
  }
  //console.log("onSubmit");
  //console.log("loginInfo", userInfo.value);
  // 更新数据
  http.post("/app/user/updateUserInfo", userInfo.value).then(res => {
    if (res.code === 200) {
      ElMessage.success("实名认证成功~");
    }
  });
  //router.replace("/myRoom/setting");
  goPage();
};
const getUserData = async () => {
  http.get(`/app/user/getUserInfo`).then(res => {
    if (res.code === 200) {
      userInfo.value = res.data;
    }
    userStore.setUserInfo(res.data);
    //console.log("userInfo", userInfo.value);
  });
};
const goPage = () => {
  // 获取当前路由的历史记录条目
  const historyIndex = router.currentRoute.value.meta.historyIndex;

  // 替换为上一个路由
  router.replace({
    name: router.currentRoute.value.matched[historyIndex - 1].name
  });
};
const goBack = () => {
  router.go(-1);
};
onMounted(() => {
  getUserData();
});
</script>

<style scoped lang="less">
// 点击保存按钮
#verifyclass {
  height: 35px;
  width: 300px;
  border-radius: 5px;
  margin: 0 10%;
  background-color: rgb(144, 147, 153);
  cursor: pointer;

  div {
    color: white;
    margin: 15px 39%;
    font-size: 16px;
    line-height: 35px;
  }
}

.my-button {
  height: 35px;
  width: 300px;
  border-radius: 5px;
  margin: 0 10%;
  background-color: rgb(64, 158, 255);
  cursor: pointer;

  div {
    color: white;
    margin: 15px 39%;
    font-size: 16px;
    line-height: 35px;
  }
}
</style>
